<template>
  <div class="container">
    <div class="flx-center" style="margin-bottom: 10px">
      <el-Button
        type="primary"
        :icon="Back"
        size="small"
        class="arrowBtn topPrevious"
        aria-label="topPrevious"
        @click="changeParamsIndex(-1)"
      />
      <div class="chartTitle" @click="handleChartClick">{{ params[currentParamsIndex].title }}</div>
      <el-Button
        type="primary"
        :icon="Right"
        size="small"
        class="arrowBtn topNext"
        aria-label="topNext"
        @click="changeParamsIndex(1)"
      />
    </div>
    <Swiper
      :modules="modules"
      :loop="true"
      :slides-per-view="1"
      :space-between="50"
      :autoplay="autoplayConfig"
      @swiper="onSwiper"
      @slide-change="onSlideChange"
      :navigation="navigation"
      class="swiperBox"
      @mouseenter="handleMouseEnter"
      @mouseleave="handleMouseLeave"
    >
      <SwiperSlide v-for="(slide, slideIndex) in params" :key="slideIndex" style="width: 100%">
        <BarLineChart :data="slide.data" :legend-data="slide.legendData" :x-label="slide.xLabel" :rotate="slide.rotate" />
      </SwiperSlide>
    </Swiper>
  </div>
</template>

<script setup lang="ts">
import { Autoplay, Pagination, Navigation, Scrollbar } from "swiper/modules";
import { ref, computed, onMounted, watch } from "vue";
import BarLineChart from "@/components/ECharts/components/barLineChart.vue";
import { Right, Back } from "@element-plus/icons-vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import type { Swiper as SwiperType } from "swiper";
import "swiper/css";

interface SwiperInstance {
  slideTo: (index: number) => void;
  autoplay: {
    start: () => void;
    stop: () => void;
    running: boolean;
  };
  realIndex: number;
}

const params = [
  {
    title: "机房电费异常核查",
    xLabel: ["天心区", "开福区", "芙蓉区", "雨花区", "岳麓区", "长沙县", "望城区", "浏阳市", "宁乡市", "合计"],
    legendData: ["10月后评估任务量", "核查任务量", "核查进度"],
    rotate: 45,
    data: [
      {
        name: "10月后评估任务量",
        type: "bar",
        data: [17, 21, 9, 36, 26, 44, 39, 46, 34, 271],
        color: ["rgba(30, 118, 159, 1)", "rgba(30, 118, 159, 0.3)"]
      },
      {
        name: "核查进度",
        type: "line",
        data: ["101.64%", "157.83%", "110.00%", "99.45%", "106.24%", "106.11%", "106.76%", "114.63%", "118.43%", "112.00%"],
        color: ["rgba(128,255,212,1)", "rgba(128,255,212,0.5)"]
      },
      {
        name: "核查任务量",
        type: "bar",
        data: [7, 6, 5, 10, 6, 18, 19, 10, 19, 100],
        color: ["rgba(0, 213, 255, 1)", "rgba(0, 213, 255, 0.3)"]
      }
    ]
  },
  {
    title: "铁塔单站服务费压降",
    xLabel: ["芙蓉区", "雨花区", "天心区", "开福区", "岳麓区", "长沙县", "望城区", "浏阳市", "宁乡市", "长沙"],
    legendData: ["截止本月单站服务费平均年化值", "单站平均年化值降幅"],
    rotate: 45,
    data: [
      {
        name: "截止本月单站服务费平均年化值",
        type: "bar",
        data: [2117.77, 2142.69, 2337.22, 2104.12, 2073.4, 1973.96, 1992.16, 1990.9, 2043.38, 2060.84],
        color: ["rgba(30, 118, 159, 1)", "rgba(30, 118, 159, 0.3)"]
      },
      {
        name: "单站平均年化值降幅",
        type: "line",
        data: ["5.98%", "8.34%", "5.66%", "6.00%", "7.67%", "6.96%", "8.21%", "6.37%", "11.84%", "7.91%"],
        color: ["rgba(128,255,212,1)", "rgba(128,255,212,0.5)"]
      }
    ]
  },
  {
    title: "长沙2G网络与客户升级及2G资产处置专题",
    xLabel: ["2G小区退网", "有2无4覆盖", "4/5G打底网建设", "设备拆除报废移交率", "设备再利用比例"],
    legendData: ["得分", "当前进度", "失分"],
    rotate: 0,
    data: [
      {
        name: "得分",
        type: "bar",
        data: [16.74, 3.5, 2.32, 4.79, 0.72],
        color: ["rgba(30, 118, 159, 1)", "rgba(30, 118, 159, 0.3)"]
      },
      {
        name: "当前进度",
        type: "line",
        data: ["89.7%", "100%", "40.9%", "44.9%", "38.8%"],
        color: ["rgba(0, 213, 255, 1)", "rgba(0, 213, 255, 0.3)"]
      },
      {
        name: "失分",
        type: "bar",
        data: [7.76, 0, 1.18, 1.21, 0.28],
        color: ["rgba(30, 118, 159, 1)", "rgba(30, 118, 159, 0.3)"]
      }
    ]
  },
  {
    title: "9月份千兆质差小区整改情况",
    xLabel: ["芙蓉区", "开福区", "浏阳市", "宁乡县", "天心区", "望城区", "雨花区", "岳麓区", "长沙县", "总计"],
    legendData: ["质差小区总量", "总计整改", "整改完成率"],
    rotate: 45,
    data: [
      {
        name: "质差小区总量",
        type: "bar",
        data: [7, 14, 2, 7, 10, 11, 20, 24, 7, 102],
        color: ["rgba(30, 118, 159, 1)", "rgba(30, 118, 159, 0.3)"]
      },
      {
        name: "整改完成率",
        type: "line",
        data: ["100.00%", "78.57%", "100.00%", "28.57%", "60.00%", "100.00%", "90.00%", "100.00%", "100.00%", "86.27%"],
        color: ["rgba(128,255,212,1)", "rgba(128,255,212,0.5)"]
      },
      {
        name: "总计整改",
        type: "bar",
        data: [7, 11, 2, 2, 6, 11, 18, 24, 7, 88],
        color: ["rgba(30, 118, 159, 1)", "rgba(30, 118, 159, 0.3)"]
      }
    ]
  }
];

const emit = defineEmits(["clickEvent"]);
const currentParamsIndex = ref(0);
const swiperInstance = ref<SwiperInstance | any>(null);

const autoplayConfig = computed(() => ({
  delay: 4000,
  disableOnInteraction: true,
  pauseOnMouseEnter: true
}));

const changeParamsIndex = (step: number) => {
  currentParamsIndex.value = (currentParamsIndex.value + step + params.length) % params.length;
  if (swiperInstance.value) {
    swiperInstance.value.slideTo(currentParamsIndex.value);
    swiperInstance.value.autoplay.start();
  }
};

const modules = [Autoplay, Pagination, Navigation, Scrollbar];
const navigation = ref({
  nextEl: ".topNext",
  prevEl: ".topPrevious"
});

const onSwiper = (swiper: SwiperType) => {
  swiperInstance.value = swiper as SwiperInstance;
  // 绑定鼠标事件
  swiperInstance.value.on("mouseenter", handleMouseEnter);
  swiperInstance.value.on("mouseleave", handleMouseLeave);
};
const onSlideChange = () => {
  if (swiperInstance.value) {
    currentParamsIndex.value = swiperInstance.value.realIndex;
    swiperInstance.value.autoplay.start();
  }
};

const handleMouseEnter = () => {
  if (swiperInstance.value && swiperInstance.value.autoplay) {
    swiperInstance.value.autoplay.stop();
  }
};

const handleMouseLeave = () => {
  if (swiperInstance.value && swiperInstance.value.autoplay) {
    swiperInstance.value.autoplay.start();
  }
};

onMounted(() => {
  if (swiperInstance.value) {
    swiperInstance.value.off("mouseenter", handleMouseEnter);
    swiperInstance.value.off("mouseleave", handleMouseLeave);
    swiperInstance.value.autoplay.start(); // 确保在组件卸载前重启轮播
  }
});

watch(currentParamsIndex, newIndex => {
  if (swiperInstance.value && swiperInstance.value.realIndex !== newIndex) {
    swiperInstance.value.slideTo(newIndex);
  }
});

const handleChartClick = () => {
  emit("clickEvent", params[currentParamsIndex.value].title);
};
</script>

<style scoped lang="scss">
.container {
  position: relative;
  width: 100%;
  height: 100%;
  .arrowBtn {
    position: absolute;
    box-sizing: border-box;
    width: 10px;
    height: 18px;
    color: #b1d8ff;
    background: rgb(102 226 251 / 8%);
    border: 1px solid rgb(18 142 255 / 40%);
    &.ant-btn-sm {
      border-radius: 0;
    }
  }
  .arrowBtn:hover {
    color: #00d5ff;
    background-color: rgb(102 226 251 / 30%);
  }
  .topPrevious {
    left: 0;
  }
  .topNext {
    right: 0;
  }
  .swiperBox {
    width: 100%;
    height: calc(100% - 40px);
  }
}
.swiper-button-prev,
.swiper-button-next {
  width: 1px;
  height: 1px;

  --swiper-navigation-size: 30px;
}
</style>
